/*
 * Copyright 2020 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'mixins';
@import '../../PatternFly/common';

$tab-label-font-size: 0.875rem;

@include TopTabStripeAbsolute {
  --tab-shadow: inset 0 -3px 0 0;
  --pf-c-masthead--BackgroundColor: var(--color-stripe-01);

  .kui--top-tab-stripe-header {
    display: flex;
    height: $height;
    min-height: $height;
    align-items: stretch;
  }

  @include HeaderNameContainer {
    align-items: stretch;
    position: relative;

    /** Override some media queries */
    padding-right: var(--pf-c-page__header-brand--xl--PaddingRight);
  }
  @include HeaderName {
    color: var(--color-text-01);
    font-weight: 500;
    font-size: inherit;
    position: relative;
    border: none;
  }

  @include HeaderName {
    &,
    &:hover {
      color: var(--color-text-02);
    }
  }

  @include TabClose {
    font-size: 0.75rem;
  }

  @include Tab {
    display: flex;
    align-items: center;
    position: relative;
    min-width: 12em;

    a:not([data-custom-label]) {
      max-width: 20em;
      padding-right: 0.5em;
    }

    padding-left: 0;
    padding-right: 0;
    --pf-c-nav--m-horizontal__link--Left: 0;
    --pf-c-nav--m-horizontal__link--Right: 0;

    --pf-c-nav__link--FontSize: $tab-label-font-size;
    --pf-c-nav__link--before--BorderColor: var(--color-table-border3);
    &:hover {
      --pf-c-nav__link--before--BorderColor: var(--color-table-border2);
    }
    &.kui--tab--active {
      --pf-c-nav__link--before--BorderColor: var(--active-tab-color);
    }

    &:not(:first-child) {
      margin-left: 0.125em;
    }

    &.processing {
      &,
      &.kui--tab--active {
        @include TabLabel {
          color: var(--color-base0C);
        }
      }
    }

    [data-tab-names='fixed'],
    [data-fresh='true'] {
      @include TabLabel {
        padding-right: 0;
      }
    }

    &.kui--tab--active {
      @include TabLabel {
        color: var(--color-text-01);
        &:hover {
          color: var(--color-text-01);
        }
      }
    }
    @include TabLabel {
      /* for input */
      border: none;
      background: transparent;

      font-size: inherit;
      color: var(--color-text-02);
      padding: 0;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;

      &:hover {
        color: var(--color-text-02);
        background: transparent;
      }

      &:focus {
        border-color: var(--color-brand-03);
      }
    }

    /* Markdown custom Tab labels */
    .kui--tab--label-text {
      h1,
      h2,
      h3,
      h4,
      p {
        font-size: inherit;
        font-weight: inherit;
        line-height: initial;
        code {
          font-family: var(--font-sans-serif);
        }
      }
    }

    &:hover .kui--tab-close {
      opacity: 1;
    }
    .kui--tab-close {
      transition-property: background-color;
      padding: 1px;
      display: flex;
      cursor: pointer;
      margin: 0 0.375em 0 0.875em;
      opacity: 0;

      svg path {
        fill: transparent;
        transition-property: fill;
        fill: var(--color-text-02);
      }
      &:hover svg path {
        fill: var(--color-text-01);
      }
      &:hover {
        background: var(--color-table-border3);
      }
    }

    &:not(.kui--tab--active) .kui--tab-close:hover {
      background: var(--color-table-border3);
    }

    /* This overrides the .kui--tab:after rule we have from Sidecar */
    &:after {
      display: none;
    }
  }

  /* This makes some separation between the selected tab border and the SplitHeader */
  .pf-c-nav.pf-m-horizontal .pf-c-nav__link::before {
    bottom: 1px;
  }

  .kui--top-tab-buttons {
    display: flex;
    flex: 1;
    align-items: center;
    margin: 0 0.375em;

    .kui--top-tab-button {
      display: flex;
      padding: 3px;

      &:hover {
        background: var(--color-table-border3);
      }
    }

    svg {
      fill: var(--color-text-02);
    }
  }
  @include TopTabs {
    padding-left: 0;
    background-color: transparent;
  }

  @include TopTabStripeTabOverflowButton {
    color: var(--color-text-01);
    &[disabled] {
      color: var(--color-text-02);
    }
  }
}

@media (max-width: 42rem) {
  @include TopTabStripe {
    display: none;
  }
}

/* Rules to improve rendering versus Sidebar hamburger menu icon */
@include TopTabStripe {
  @include HeaderNameContainer {
    min-height: $height;
  }
  @include HeaderName {
    display: flex;
    align-items: center;
  }
  @include TopTabStripe_Main {
    min-height: $height;
  }
  @include TopTabStripe_Content {
    min-height: $height;
    align-items: stretch;
  }
}

@media (orientation: landscape) and (max-height: 450px) {
  @include TopTabStripeAbsolute {
    display: none;
  }
}
